<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>系统设置</el-breadcrumb-item>
				<el-breadcrumb-item>系统字典</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--start content-->
		<!--start content-->
		<div class="content">
			<!--start 下拉-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search animated"  v-show="add">
						<div class="search-title">
							<p>新增</p>
						</div>
						<div class="form">
							<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px">
								<el-row :gutter="10">
									<el-col :span="10">
										<el-form-item label="所属类别" prop="">
											<el-input disabled v-model="addForm.type"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										
										
										
										<el-form-item label="是否启用" prop="">
											<el-select class="selectWidth" v-model="addForm.state">
												<el-option label="启用" value="0"></el-option>
												<el-option label="停用" value="1"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="10">
										
										
										<el-form-item label="值" prop="ddlistKey">
											<el-input v-model="addForm.ddlistKey"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="名称" prop="name">
											<el-input v-model="addForm.name"></el-input>
										</el-form-item>
										
										
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="10">
										<el-form-item label="是否默认" prop="">
											<el-select class="selectWidth" v-model="addForm.defa">
												<el-option label="是" value="1"></el-option>
												<el-option label="否" value="0"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="备注" prop="">
											<el-input type="text" v-model="addForm.marker"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div>
							<el-button type="primary" @click="addOkBtn">确定</el-button>
							<el-button @click="addCancelBtn">取消</el-button>
						</div>
					</div>
				</transition>

				<transition name="fade">
					<div class="modal-backdrop" v-show="update"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search animated" v-show="update">
						<div class="search-title">
							<p>修改</p>
						</div>
						<div class="form">
							<el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px">
								<el-row :gutter="10">
									<el-col :span="10">
										<el-form-item label="所属类别" prop="">
											<el-input disabled v-model="updateForm.type"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="是否启用" prop="">
											<el-select class="selectWidth" v-model="updateForm.state">
												<el-option label="启用" value="0"></el-option>
												<el-option label="停用" value="1"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="10">
										<el-form-item label="值" prop="ddlistKey">
											<el-input v-model="updateForm.ddlistKey"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="名称" prop="name">
											<el-input v-model="updateForm.name"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="10">
										<el-form-item label="是否默认" prop="">
											<el-select class="selectWidth" v-model="updateForm.defa" @click="console.log('1')">
												<el-option label="是" value="1"></el-option>
												<el-option label="否" value="0"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="备注" prop="">
											<el-input type="textarea" v-model="updateForm.marker"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
						<div>
							<el-button type="primary" @click="updateOkBtn">确定</el-button>
							<el-button @click="updateCancelBtn">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<!--end 下拉-->
			<!--start contentBody-->
			<div class="contentBody">
				<el-row :gutter="20">
					<el-col :span="4">
						<div class="listTitle">系统字典</div>
						<ul class="list">
							<li v-for="(item,index) in dDTypeSlide" :class="{active:item.liActive}" @click="table(item.ddtypeCode,index)">{{item.ddtypeName}}</li>
						</ul>
					</el-col>
					<el-col :span="20">
						<div class="contentBodyHeader clearfix">
							<div class="oper fl" v-show="isCheckbox">
								<i class="iconfont marginRight30 closeOperBtn" @click="closeOperFn">&#xe630;</i>
								<span class="marginRight30">已选<span style="color: #03B8CC;">{{checkBoxItems}}</span>项</span>
								<i class="marginRight30">|</i>
								<a class="marginRight30 btn" @click="stateOpenItemsFn">
									<i class="iconfont">&#xe767;</i> 批量启用
								</a>
								<a class="marginRight30 btn" @click="stateCloseItemsFn">
									<i class="iconfont">&#xe63a;</i> 批量停用
								</a>
								<a class="btn" @click="deleteItemsFn">
									<i class="iconfont">&#xe70a;</i> 批量删除
								</a>
							</div>
							<div class="fr">
								<el-button type="primary" @click="addBoxOpen">新增</el-button>
							</div>
						</div>
						<div class="contentBodyCon" :class="{beforeNone:tableData.length!='0'}">
							<el-table 
								ref="table" border :max-height="tableH" :data="tableData" tooltip-effect="dark" class="table" @sort-change="vFun_sort" @selection-change="checkboxChangeFn">
								<el-table-column type="selection" width="42"></el-table-column>
								<el-table-column sortable label="编码" prop="ddlistCode" sortable></el-table-column>
								<el-table-column sortable label="名称" prop="ddlistName"></el-table-column>
								<el-table-column sortable label="值" prop="ddlistKey"></el-table-column>
								<el-table-column sortable label="状态" prop="dataBillstateStr"></el-table-column>
								<el-table-column sortable label="是否默认" prop="ddlistDefaultStr"></el-table-column>
								<el-table-column sortable label="说明" prop="ddlistRemark" show-overflow-tooltip></el-table-column>
								<el-table-column width="60" fixed="right">
									<template scope="scope">
										<el-popover trigger="hover" placement="left-start">
											<p class="p" @click="updateBoxOpen(scope.row)">
												<em class="iconfont">&#xe617;</em>修改
											</p>
											<p class="p" v-show="scope.row.dataBillstateStr == '启用'" @click="isStateOpenBtn(scope.row,'停用')"><em class="iconfont">&#xe767;</em>停用</p>
											<p class="p" v-show="scope.row.dataBillstateStr == '停用'" @click="isStateOpenBtn(scope.row,'启用')"><em class="iconfont">&#xe767;</em>启用</p>
											<p v-show="!scope.row.deleteShow" class="p" @click="delateBtn(scope.row)"><em class="iconfont">&#xec50;</em>删除</p>
											<div slot="reference" style="text-align: center;cursor: pointer;">
												<i class="el-icon-more iconBtn"></i>
											</div>
										</el-popover>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-col>
				</el-row>
			</div>
			<!--end contentBody-->
			<!--start contentFooter-->

			<!--end contentFooter-->
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import * as basicData from '../../../assets/data/basicDDTypeData'
	export default {
		data() {
			return {
				clientHeight: document.documentElement.clientHeight,
				checkBoxItems:"",
				ddlistCodeStr:"",
				tableH: null,
				add: false,
				update: false,
				isCheckbox: false,
				orderStr:'',
				dDTypeSlide: {},
				addForm: {
					type: "",
					name: "",
					defa: "0",
					state: "0",
					marker: "",
					ddtypeCode: "",
					ddlistCode: ""
				},
				updateForm: {
					type: "",
					name: "",
					defa: "1",
					state: "1",
					marker: "",
					ddtypeCode: "",
					ddlistCode: ""
				},
				rules: {
					type: [{
						required: true,
						message: '校验未通过',
						trigger: 'blur'
					}],
					name: [{
							required: true,
							message: '名称/值不能为空',
							trigger: 'blur'
						},
						{
							required: true,
							min: 0,
							max: 50,
							message: '名称/值不能超过五十个字',
							trigger: 'blur'
						}
					],
					ddlistKey: [{
							required: true,
							message: '值不能为空',
							trigger: 'blur'
						},
						{
							required: true,
							min: 0,
							max: 50,
							message: '值不能超过五十个字',
							trigger: 'blur'
						}
					]
				},
				tableData:[]
			}
		},
		methods: {
			queryAll(ddtypeCode){
				this.axios({
					method: "post",
					url: "/v3/system/ddlists/"+ddtypeCode+"/queryAllSystemDdlist",						
					data:{
						"ddtypeCode": ddtypeCode
					}
				}).then((res) => {
						this.tableData = res.data.list;
				}).catch((err) => {
				this.Public.openError(this,err.response.data)
					this.tableData = basicData.listData;
				})
			},
			//右上角成功提示
			openSuccess(msg) {
				this.$notify({
					message: msg,
					type: 'success',
					duration: 3000
				});
			},
			//右上角失败提示
			openError(msg) {
				this.$notify({
					message: msg,
					type: 'error',
					duration: 3000
				});
			},
			table(code, index) {
				for(let i = 0, len = this.dDTypeSlide.length; i < len; i++) {
					this.dDTypeSlide[i].liActive = false;
				}
				this.dDTypeSlide[index].liActive = true;
				this.addForm.type = this.dDTypeSlide[index].ddtypeName;
				this.addForm.ddtypeCode = this.dDTypeSlide[index].ddtypeCode;
				this.updateForm.type = this.dDTypeSlide[index].ddtypeName;
				this.updateForm.ddtypeCode = this.dDTypeSlide[index].ddtypeCode;
				this.queryAll(code);
			},
			addBoxOpen() {
				this.add = true;
			},
			addOkBtn() {
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						this.axios({
							method: 'post',
							url: '/v3/system/ddlists',
							data:{
								"ddtypeCode": this.addForm.ddtypeCode,
								"ddlistName": this.addForm.name,
								"ddlistDefault": this.addForm.defa,
								"dataBillstate": this.addForm.state,
								"ddlistKey": this.addForm.ddlistKey,
								"ddlistRemark": this.addForm.marker
							}
						}).then((res) => {
								this.queryAll(this.addForm.ddtypeCode);
								this.addForm = {
									ddlistCode: "",
									type: this.addForm.type,
									name: "",
									defa: "0",
									state: "0",
									marker: "",
									ddtypeCode: this.addForm.ddtypeCode
								};
								this.openSuccess("操作成功！");
							this.add = false;
						}).catch((err)=>{
							this.add = false;
							this.Public.openError(this,err.response.data)
						});
					} else {
						return false;
					}
				});
			},
			addCancelBtn() {
				this.add = false;
				this.addForm = {
					ddlistCode: "",
					type: this.addForm.type,
					name: "",
					defa: "0",
					state: "0",
					marker: "",
					ddtypeCode: this.addForm.ddtypeCode
				};
				this.$refs.addForm.resetFields();
			},
			updateBoxOpen(data) {
				this.update = true;
				this.updateForm.name = data.ddlistName;
				this.updateForm.defa = data.ddlistDefault;
				this.updateForm.state = data.dataBillstate;
				this.updateForm.ddlistKey = data.ddlistKey;
				this.updateForm.marker = data.ddlistRemark;
				this.updateForm.ddlistCode = data.ddlistCode;
				this.updateForm.ddtypeCode = data.ddtypeCode;
			},
			updateOkBtn() {
				this.$refs.updateForm.validate((valid) => {
					if(valid) {
						this.axios({
							method: 'put',
							url: '/v3/system/ddlists/'+this.updateForm.ddlistCode,
							data: {
								"ddtypeCode": this.updateForm.ddtypeCode,
								"ddlistName": this.updateForm.name,
								"ddlistDefault": this.updateForm.defa,
								"dataBillstate": this.updateForm.state,
								"ddlistKey": this.updateForm.ddlistKey,
								"ddlistRemark": this.updateForm.marker
							}
						}).then((res) => {
								this.queryAll(this.updateForm.ddtypeCode);
								this.Public.openSuccess(this,"操作成功！");
								this.updateForm = {
									ddlistCode: "",
									type: this.updateForm.type,
									name: "",
									defa: "",
									state: "",
									marker: "",
									ddtypeCode: this.updateForm.ddtypeCode
								}
							this.update = false;
						}).catch((err)=>{
							this.update = false;
							this.Public.openError(this,err.response.data)
						});
					} else {
						return false;
					}
				});
			},
			updateCancelBtn() {
				this.update = false;
				this.updateForm = {
					ddlistCode: "",
					type: this.updateForm.type,
					name: "",
					defa: "",
					state: "",
					marker: "",
					ddtypeCode: this.updateForm.ddtypeCode
				};
				this.$refs.addForm.resetFields();
			},
			isStateOpenBtn(data,execute) {
				this.$confirm('确认' + execute + '？', '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					if("0" == data.dataBillstate) {
						this.axios({
							method: "PATCH",
							url: '/v3/system/ddlists/'+data.ddlistCode+'/batchDisable'
						}).then((res) => {
								this.queryAll(data.ddtypeCode);
								this.Public.openSuccess(this,"操作成功！");
						}).catch((err) => {
							this.Public.openError(this,err.response.data)
						})
					} else if("1" == data.dataBillstate) {
						this.axios({
							method: "PATCH",
							url: '/v3/system/ddlists/'+data.ddlistCode+'/batchEnable'
						}).then((res) => {
								this.queryAll(data.ddtypeCode);
								this.Public.openSuccess(this,"操作成功！");
						}).catch((err) => {
								this.Public.openError(this,err.response.data)
						})
					}
				}).catch(() => {
					//点击取消的回调
				});
			},
			delateBtn(data) {
				this.$confirm('确认删除？', '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "DELETE",
						url: "/v3/system/ddlists/"+data.ddlistCode,
					}).then((res) => {
							this.queryAll(data.ddtypeCode);
							this.Public.openSuccess(this,"操作成功！");
					}).catch((err) => {
						this.Public.openError(this,err.response.data)
					})
				}).catch(() => {
					//点击取消的回调
				});
			},
			checkboxChangeFn(arr){
				this.ddlistCodeStr = "";
				this.isCheckbox = !arr.length?false:true;
				this.checkBoxItems = arr.length;
				for(let i=0,len=arr.length;i<len;i++){
					this.ddlistCodeStr += arr[i].ddlistCode+","
				}
				this.ddlistCodeStr = this.ddlistCodeStr.substring(0,this.ddlistCodeStr.length-1);
			},
			deleteItemsFn(){
				this.$confirm('确认批量删除？', '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "DELETE",
						url: "/v3/system/ddlists/"+this.ddlistCodeStr,
					}).then((res) => {
							this.queryAll(this.addForm.ddtypeCode);
							this.closeOperFn();
							this.Public.openSuccess(this,"操作成功！");
					}).catch((err) => {
							this.Public.openError(this,err.response.data)
					})
				}).catch(() => {
					//点击取消的回调
				});
			},
			stateOpenItemsFn(){
				this.$confirm('确认批量启用？', '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "PATCH",
						url: '/v3/system/ddlists/'+this.ddlistCodeStr+'/batchEnable'
					}).then((res) => {
							this.queryAll(this.addForm.ddtypeCode);
							this.closeOperFn();
							this.Public.openSuccess(this,"操作成功！");
					}).catch((err) => {
							this.Public.openError(this,err.response.data)
					})
				}).catch(() => {
					//点击取消的回调
				});
			},
			stateCloseItemsFn(){
				this.$confirm('确认批量停用？', '确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "PATCH",
						url: '/v3/system/ddlists/'+this.ddlistCodeStr+'/batchDisable'
					}).then((res) => {
							this.queryAll(this.addForm.ddtypeCode);
							this.closeOperFn();
							this.Public.openSuccess(this,"操作成功！");
					}).catch((err) => {
							this.Public.openError(this,err.response.data)
					})
				}).catch(() => {
					//点击取消的回调
				});
			},
			closeOperFn(){
				this.$refs.table.clearSelection();
				this.ddlistCodeStr = "";
				this.isCheckbox = false;
			}
		},
		watch: {
			screenWidth: (val) => {
				this.clientHeight = val
			}
		},
		created(){
			/* 请求系统字典类别接口 */
			this.axios({
				method: "POST",
				url: "/v3/system/ddtypes/listAll",
				data:{
					"orderStr":this.orderStr
				}
			}).then((res) => {
					for(let i = 0, len = res.data.list.length; i < len; i++) {
						res.data.list[i].liActive = false;
					}
					/* 控制选中的li高亮 */
					res.data.list[0].liActive = true;
					this.addForm.type = res.data.list[0].ddtypeName;
					this.addForm.ddtypeCode = res.data.list[0].ddtypeCode;
					this.updateForm.type = res.data.list[0].ddtypeName;
					this.updateForm.ddtypeCode = res.data.list[0].ddtypeCode;
					this.dDTypeSlide = res.data.list;
					/* 请求系统字典List接口 */
					this.queryAll(this.addForm.ddtypeCode)
				
			}).catch((err) => {
				this.Public.openError(this,err.response.data)
				this.dDTypeSlide = basicData.typeData.systemDdtypeViewVoList;
			});
		},
		mounted() {
			/* 动态给list和table的高度赋值 */
			document.querySelector(".list").style.height = (document.documentElement.clientHeight - 180) + 'px';
			this.tableH = document.documentElement.clientHeight - 175;
			/* 监听window.onresize事件 */
			const _this = this;
			window.onresize = () => {
				if(document.querySelector(".list")) {
					document.querySelector(".list").style.height = (document.documentElement.clientHeight - 180) + 'px';
				};
				this.tableH = document.documentElement.clientHeight - 175;
				return(() => {
					window.clientHeight = document.documentElement.clientHeight
					_this.clientHeight = window.clientHeight
				})()
			};
		}
	}
</script>

<style scoped>
	* {
		transition: .2s;
		box-sizing: border-box;
	}

	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 25px;
		padding: 3px 0 15px 0;
	}

	div.content {
		position: relative;
		flex: 1;
		width: 100%;
		padding: 15px 20px 0 20px;
		box-sizing: border-box;
		background: #fff;
	}
	/* start add */

	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
		/*background-color: rgba(0, 0, 0, .2);*/
	}

	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 2003;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}

	.form {
		width: 1000px;
		background: #fff;
		margin: 20px 0;
		padding-left: 30px;
	}

	.search-btn {
		margin-top: 50px;
	}
	/* end add */
	/* start contentBody */

	.contentBody {
		width: 100%;
	}

	.listTitle {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #EEF1F9;
		font-size: 13px;
		color: #1f373d;
		border-radius: 4px 4px 0 0;
	}

	.list {
		width: 100%;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 0 0 4px 4px;
		overflow-y: auto;
		font-size: 12px;
	}

	.list li {
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
		/*background: #fff;*/
	}

	.list li:hover {
		color: #1f373d;
		background: #F5F7FC;
	}

	.list li.active {
		color: #1f373d;
		background: #F5F7FC;
	}
	.contentBodyCon{
		border-left:1px solid rgb(223, 234, 236);
		border-top:1px solid rgb(223, 234, 236);
	}
	.contentBodyHeader {
		width: 100%;
		height: 30px;
		line-height: 30px;
		margin-bottom: 15px;
	}

	.oper i {
		font-size: 14px;
	}

	.marginRight30 {
		margin-right: 30px;
	}

	.closeOperBtn {
		display: inline-block;
		transform: translate(0, 1px);
		cursor: pointer;
	}

	.closeOperBtn:hover {
		color: #13c19f;
	}

	.btn {
		cursor: pointer;
	}

	.btn:hover {
		color: #13c19f;
	}

	.btn:hover i {
		color: #13c19f;
	}

	.p {
		padding-left: 10px;
		cursor: pointer;
	}

	.p:hover {
		background: #eef1f9;
		color: #13c19f;
	}

	.p:hover em {
		color: #13c19f;
	}

	.selectWidth {
		width: 100%;
	}
	/* end contentBody */
	/*start vue过渡*/

  .fade-enter-active, .fade-leave-active {
	transition: .4s;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }
  .slideDown-enter-active, .slideDown-leave-active {
	transition: .4s;
  }
  .slideDown-enter, .slideDown-leave-active {
    opacity: 0;
  }
	/*end vue过渡*/
</style>
